<!--
  This file is a part of the open-eBackup project.
  This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
  If a copy of the MPL was not distributed with this file, You can obtain one at
  http://mozilla.org/MPL/2.0/.
  
  Copyright (c) [2024] Huawei Technologies Co.,Ltd.
  
  THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
  EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
  MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
  -->

<div>
  <div class="aui-operation">
    <lv-group>
      <lv-pro-button-group [config]="unitOptsConfig" [bindData]="selectionData">
      </lv-pro-button-group>
    </lv-group>
    <lv-group lvGutter="8px">
      <lv-group lvGutter="8px">
        <button
          class="aui-button-icon"
          lv-button
          lvSize="auto"
          (click)="dataTable.fetchData()"
        >
          <i lv-icon="lv-icon-refresh" [lvColorState]="true"></i>
        </button>
      </lv-group>
    </lv-group>
  </div>
  <lv-pro-table #dataTable [config]="unitTableConfig" [data]="unitTableData">
  </lv-pro-table>
</div>

<ng-template #healthStatusTpl let-item>
  <div *ngIf="item.healthStatus === dataMap.HealthStatus.degraded.value" lv-overflow class="delete-status">
    <i lv-icon="aui-icon-loading" class="lv-m-rotate"></i>
    <span>{{'protection_degraded_label' | i18n}}</span>
  </div>
  <div *ngIf="item.healthStatus !== dataMap.HealthStatus.degraded.value">
    <aui-status [value]="item.healthStatus" type="HealthStatus"></aui-status>
  </div>

</ng-template>
<ng-template #runningStatusTpl let-item>
  <div>
    <aui-status [value]="item.runningStatus" [type]="appUtilsService.isDistributed
      ? 'DistributedStoragePoolRunningStatus'
      : 'StoragePoolRunningStatus'"></aui-status>
  </div>

</ng-template>
<ng-template #capacityTpl let-item >
  <div class='percent-bar'>
    <lv-progress [lvValue]="Math.round (item.usedCapacity / item.totalCapacity * 10000) / 100" [lvSize]="'small'" [lvColors]='progressBarColor'
                 [lvLabel]="progressLabelTpl" lvDecimals="3"></lv-progress>
    <div class='size-percent' *ngIf="item.deviceType === dataMap.poolStorageDeviceType.OceanProtectX.value">
      {{item.usedCapacity * 512 | capacityCalculateLabel:'1.1-3':unitconst.BYTE:
      true}}/{{item.totalCapacity * 512 | capacityCalculateLabel:'1.1-3':unitconst.BYTE:
      true}}
    </div>
    <div class='size-percent' *ngIf="item.deviceType !== dataMap.poolStorageDeviceType.OceanProtectX.value">
      {{item.usedCapacity | capacityCalculateLabel:'1.1-3':unitconst.KB:
      true}}/{{item.totalCapacity | capacityCalculateLabel:'1.1-3':unitconst.KB:
      true}}
    </div>
  </div>
</ng-template>

<ng-template #progressLabelTpl let-data>
  {{ data < 0.001 ? (data == 0 ? 0 : lessThanLabel + '0.001') : data}}%
</ng-template>

<ng-template #thresholdTpl let-item>
  {{ item.threshold | nil }}%
</ng-template>

<ng-template #deviceTypeTPl let-item>
  <span lv-overflow>{{item.deviceType | textMap: 'poolStorageDeviceType'}}</span>
</ng-template>
